<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .el-table .warning-row {
            background: #b3e19d;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

    </style>

</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../js/Axios/axios-0.18.0.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<div id="app">


    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 30px">
        <el-form-item label="请输入地址：">
            <el-input v-model="formInline.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="商品的id：">
            <el-input v-model="formInline.waresId" placeholder="请输入商品的id"></el-input>
        </el-form-item>
        <el-form-item label="商家的电话：">
            <el-input v-model="formInline.phone" placeholder="请输入商家的电话号码"></el-input>
        </el-form-item>

        <el-form-item label="选择范围：">
            <el-select v-model="formInline.Range" placeholder="选择范围">
                <el-option label="1 公里" value="1"></el-option>
                <el-option label="10 公里" value="10"></el-option>
                <el-option label="20 公里" value="20"></el-option>
                <el-option label="100 公里" value="100"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="选择状态：">
            <el-select v-model="formInline.status" placeholder="选择状态">
                <el-option label="全部" value="4"></el-option>
                <el-option label="停售" value="0"></el-option>
                <el-option label="起售" value="1"></el-option>
                <el-option label="申请中" value="2"></el-option>
                <el-option label="已禁用" value="3"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <br>
    </el-form>


    <template>
        <el-table
                :data="wares"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="image"
                    label="民宿图片"
                    width="180">
                <!--                    <el-image
                                            style="width: 100px; height: 100px"
                                            :src="scope.row.image"
                                            :fit="fill"></el-image>-->
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src=scope.row.image
                            :fit="fill"></el-image>
                </template>

            </el-table-column>
            <el-table-column
                    prop="id"
                    label="商品的id"
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="waresName"
                    label="民宿的名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="norms"
                    label="规格：人/间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="addressDistance"
                    label="距离/m"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">
                <template slot-scope="scope">
                            <span style="margin-right: 10px;">
                                {{ scope.row.status == '0' ? '停售' : '' }}
                                {{ scope.row.status == '1' ? '起售' : '' }}
                                {{ scope.row.status == '2' ? '申请中' : '' }}
                                {{ scope.row.status == '3' ? '已禁用' : '' }}
                            </span>
                </template>

            </el-table-column>

            <el-table-column
                    label="操作"
                    width="280">
                <!--                <el-button type="primary" round>购买</el-button>
                                <el-button type="success" round>查看详情</el-button>-->
                <template slot-scope="scope">
                    <el-row>
                        <!--                    <el-button type="primary" >购买</el-button>
                                            <el-button type="success"  >查看详情</el-button>-->
                        <!--                        <el-button type="primary" @click="buyWares(scope.row)">购买</el-button>-->
                        <el-button type="primary" v-if="scope.row.status != 0 && scope.row.status != 1 "
                                   @click="enable(scope.row)">启用
                        </el-button>
                        <el-button type="primary" v-if="scope.row.status != 3" style="background-color: #dd6161"
                                   @click="disable(scope.row)">禁用
                        </el-button>
                        <el-button type="success" @click="queryWares(scope.row)">查看</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </template>


</div>


<script>
    new Vue({

        el: "#app",

        data() {
            return {

                // 这是商品的数据
                wares: [{

                    id: '158582283090817021',                    /* 商品的 id */
                    waresName: '辣子鸡',             /* 商品的名称 */
                    price: '502',                 /* 商品的价格 */
                    number: '2',                /* 当天民宿的最大数量 */
                    norms: '1',                 /* 商品的套间规格 */
                    image: '/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg',                 /* 图片 */
                    addressX: '111.154481',               /* 经纬度地址的经度信息 */
                    addressY: '21.782305',               /* 经纬度地址的纬度信息 */
                    address: '广东省茂名市电白区霞洞镇永乐小学',               /* 经纬度地址的纬度信息 */
                    addressDistance: '300',        /* 距离 */
                    description: '民宿短租，快来租我吧',           /* 描述信息 */
                    status: '2',                /* 状态0 停售 1 起售 2 申请中 3 禁用 */
                    createTime: '2021-05-06 17:20:07',            /* 创建时间 */
                    updateTime: '2021-05-06 17:20:07',            /* 更新时间 */
                    createPhone: '13112345678',           /* 创建人,创建的商家的电话 */
                    updateId: '1'               /* 修改人 */

                }],

                formInline: {
                    address: '广东省茂名市电白区霞洞镇永乐小学',
                    waresId: '',
                    phone: '',
                    Range: '10',
                    status: "4"
                },

                url: "/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg"
                // url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"


            }
        },

        methods: {


            /* 提交按钮的事件 */
            async onSubmit() {

                if (this.formInline.waresId == '') {
                    this.formInline.waresId = -1;
                }

                if (this.formInline.phone == '') {
                    this.formInline.phone = -1;
                }

                let _this = this;

                if (this.formInline.address) {


                    axios({
                        method: "get",
                        url: "https://restapi.amap.com/v3/geocode/geo?address="
                            + this.formInline.address + "&output=JSON&key=93b332a46a820fb32ad2fe70976743f5"
                    }).then(function (resp) {

                        let result = JSON.stringify(resp.data);
                        let location = JSON.parse(result);

                        // alert("得到的经纬度为:  " + location.geocodes[0].location);


                        if (!location.geocodes[0].location) {
                            alert("该地址获取不出来，请重新输入地址");
                            return;
                        }

                        axios({
                            method: "get",
                            url: "/employee/getWares?location="
                                + location.geocodes[0].location + "&waresId="
                                + _this.formInline.waresId + "&Range="
                                + _this.formInline.Range + "&phone="
                                + _this.formInline.phone + "&status="
                                + _this.formInline.status
                        }).then(function (resp2) {

                            // alert("运行了1")
                            // alert(JSON.stringify(resp2))
                            // alert("resp.data.code 的数据是:  " + JSON.stringify(resp2.data.code))
                            // alert("运行了2")
                            if (resp2.data.code == 1) {

                                _this.wares = resp2.data.data;
                                // alert("查询完毕" + JSON.stringify(_this.wares))
                            } else {

                                _this.$message({
                                    showClose: true,
                                    message: '查询失败,' + resp2.data.msg,
                                    type: 'error'
                                });
                            }
                        });
                    });
                } else {

                    axios({
                        method: "get",
                        url: "/employee/getWares?waresId="
                            + _this.formInline.waresId + "&Range="
                            + _this.formInline.Range + "&phone="
                            + _this.formInline.phone + "&status="
                            + _this.formInline.status
                    }).then(function (resp2) {

                        // alert("运行了1")
                        // alert(JSON.stringify(resp2))
                        // alert("resp.data.code 的数据是:  " + JSON.stringify(resp2.data.code))
                        // alert("运行了2")
                        if (resp2.data.code == 1) {

                            _this.wares = resp2.data.data;
                            alert("查询完毕" + JSON.stringify(_this.wares))
                        } else {

                            _this.$message({
                                showClose: true,
                                message: '查询失败,' + resp2.data.msg,
                                type: 'error'
                            });
                        }
                    });

                }
            },


            // 购买
            buyWares(row) {
                // console.log(this.brand);

                alert("描述为： " + row.description)


                let _this = this;
                this.$prompt('请输入身份证号码，可以才能购买', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputPattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    inputErrorMessage: '身份证号码的格式不正确'
                }).then(({value}) => {

                    axios({
                        method: "post",
                        url: "/user/buyWares?" +
                            "idNumber=" + value +
                            "&id=" + row.id +
                            "&day=" + _this.formInline.day
                    }).then(function (resp) {


                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '购买成功,你输入的身份证号码是: ' + value
                            });
                            _this.onSubmit();
                        } else {
                            this.$message({
                                showClose: true,
                                message: '购买失败,' + resp.msg,
                                type: 'error'
                            });

                        }


                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消购买'
                    });
                });


            },


            // 查询详情
            queryWares(row) {
                // console.log(this.brand);
                alert("查询详情运行了")
                alert(row.address)
                this.$alert('<strong>这是 <i>商品民宿</i> 的详细信息</strong><br>' +
                    '<br>民宿的id:   ' + row.id +
                    '<br>民宿的名称:   ' + row.waresName +
                    '<br>民宿的价格:  ' + row.price + '  元' +
                    '<br>民宿最多能售卖:   ' + row.number + '   次' +
                    '<br>民宿最多能住:   ' + row.norms + '   人' +
                    '<br>民宿的地址:   ' + row.address +
                    '<br>民宿距离你:   ' + row.addressDistance + '  米' +
                    '<br>民宿老板的电话:   ' + row.createPhone +
                    '<br>民宿的描述:   ' + row.description +
                    '<br><a href="https://m.amap.com/navi/?dest=' + row.addressX + ',' + row.addressY + '&destName=' + row.address + '&hideRouteIcon=1&key=93b332a46a820fb32ad2fe70976743f5" target="_blank">点击可以查看地图位置</a> ' +
                    '<br>' +
                    '', '民宿的描述', {
                    dangerouslyUseHTMLString: true
                });

            },


            // 启用
            async enable(row) {
                let  _this = this;
                this.$confirm('是否启用该民宿, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios({
                        method:"put",
                        url: "/employee/updateWares",
                        data: {"id":row.id, "status":0}
                    }).then(function (resp) {

                        if (resp.data.code == 1){

                            _this.$message({
                                type: 'success',
                                message: '启用成功!'
                            });
                            _this.onSubmit();
                        }else {

                            _this.$message({
                                type: 'success',
                                message: '启用失败!'
                            });
                        }

                    });

                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消启用'
                        });
                    });
            },


            // 禁用民宿
            disable(row){

                let _this = this;


                if (row.status != 2) {

                    this.$confirm('禁用该民宿会取消该民宿的订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                        axios({
                            method: "put",
                            url: "/employee/updateWares",
                            data: {"id": row.id, "status": 3}
                        }).then(function (resp) {

                            if (resp.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '禁用成功!'
                                });
                                _this.onSubmit();
                            } else {
                                _this.$message({
                                    type: 'error',
                                    message: '禁用失败!'
                                });
                            }

                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消禁用'
                        });
                    });

                } else {



                    this.$prompt('请输入禁用的理由', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                        // inputErrorMessage: '邮箱格式不正确'
                    }).then(({ value }) => {

                        axios({
                            method: "put",
                            url: "/employee/updateWares",
                            data: {"id": row.id, "description": value, "status": 3}
                        }).then(function (resp) {

                            if (resp.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '禁用成功!'
                                });
                                _this.onSubmit();
                            } else {
                                _this.$message({
                                    type: 'error',
                                    message: '禁用失败!'
                                });
                            }

                        });


                        this.$message({
                            type: 'success',
                            message: '你的邮箱是: ' + value
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });








                }




            }


        },

        /* 初始化数据day， */
        created() {
            this.onSubmit();
        },

        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 === 1) {
                return 'warning-row';
            } else if (rowIndex % 2 === 0) {
                return 'success-row';
            }
            return '';
        }


    })


</script>


</body>
</html>